server components
reactの仕組み
server側でrenderingしたhtmlをビルド時に埋め込んだり、リクエスト時に返したりすることで余計なダウンロードや処理速度に依存せずコンテンツを返せる。
便利な点としては、クライアントでデータフェッチする必要があったコードをビルド時やリクエスト時に実行することができるようになった。
コードもその分useEffectとか、useStateとか使わなくても簡単になった
その分カスタムフックは使えない
ただ、clientで実行する必要のある、カスタムフックとか系は'use client'ディレクティブをつければ使える。
最近はnextjsばっかり触ってるから、根っこの部分全然わからん。
react-routerで作るルーティングもnextjsが勝手にやってくれるし、SSG, SSR, CSR勝手に判断してくれるし そういった意味ではフレームワーク様様
やっぱ改めて見ると細かいところやりやすくしてくれるから便利よな。
話すこし脱線
react自体はたんにdomをreactの形式で宣言的に書いて色々できるってjsのフレームワーク react-routerはそれらのjsのファイルとroutingを同期させて、spaにおけるルーティングを担ってくれる
それらを一つのhtmlで返してあとはjsで動かすみたいなのがSPA
jsの量が半端なくなってきたから、それを減らすためによくわからんSSRやSSGって考え方が出てきた。
流れとしては、本当にクライアントで実行する必要のあるJavaScriptのみ実行させてそれ以外はサーバーで処理したり静的なものとして返してキャッシュしやすくするみたいなのを目指してるんじゃないかな。
今回reactはサーバーコンポーネントに対応したけど、nextjs以外のフレームワークだとどう使うんだろ。
viteとかで使う場合もそのまま勝手にserver componentsになったりするのかな。 こういうの使ったりするっぽい
SSGとかサーバーを必要としないServer Componentとか他にもSSRとか色々あるけど、だから何ができるんってのと時代によって意味するものが変わってきたりわかりづれえ
SSGでHTMLをビルド時に生成しておくってのでも別にクライアントでjsは実行できるし動的にも表示できる。
サーバーを必要としないServer Componentってのもビルド時にあらかじめ計算してHTMLにしておくであって、Server Componentだからサーバーサイドが必要なわけじゃないってのも難しいよね。
だからあくまでclientでやらせるなら読み取りのライブラリとか読み取りを実行するコードをjsで実行しないといけないのを事前にビルド時に行わせることができる